<template>
    <view class="content">
        <view>
            <uv-swiper :list="list" height="240" radius="0"></uv-swiper>
        </view>
        <view class="card">
            <uv-form label-width="80" ref="formRef" :rules="rules" :model="datas">
                <uv-form-item label="接送地点" prop="address">
                    <view class="flex items-center">
                        <uv-textarea autoHeight height="40" v-model="datas.address" placeholder="填写接送地点"
                            prefix-icon="map">

                        </uv-textarea>
                        <uv-button @click="getLocation" size="mini" shape="circle" type="primary">获取定位</uv-button>
                    </view>

                </uv-form-item>
                <uv-form-item label="接送时间" prop="transferTime">
                    <uv-input v-model="datas.transferTime" disabled @tap="openPickerDate"></uv-input>
                    <uv-datetime-picker ref="pickerDate" mode="datetime" :minDate="new Date()"
                        @confirm="selectTime"></uv-datetime-picker>
                </uv-form-item>
                <uv-form-item label="是否有车" prop="ownCarFlag">


                    <uv-radio-group placement="row" @change="newPrice" v-model="datas.ownCarFlag"
                        :customStyle="{marginLeft:'20px'}">
                        <uv-radio label="是" name="1"></uv-radio>
                        <uv-radio label="否" name="0" :customStyle="{marginLeft:'10px'}"></uv-radio>
                    </uv-radio-group>

                </uv-form-item>
                <uv-form-item label="时长" prop="durationHours">
                    <uv-input v-model="datas.durationHours" disabled :customStyle="{display:'none'}"></uv-input>
                    <uv-list>
                        <uv-list-item link="navigateTo" title="选择约驾时长" @click="openPicker"
                            :rightText="datas.durationHours+'小时'"></uv-list-item>
                    </uv-list>
                    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirm"></uv-picker>
                </uv-form-item>
                <uv-form-item label="费用">
                    <uv-input placeholder="自动计算费用" disabled="" prefix-icon="red-packet" v-model="price"
                        suffix-icon="元"></uv-input>
                </uv-form-item>
                <uv-form-item label="备注">
                    <uv-textarea placeholder="备注信息" v-model="datas.remark">

                    </uv-textarea>
                </uv-form-item>
            </uv-form>
            <uv-button type="primary" :customStyle="{marginTop:'20rpx'}" @click="submit" shape="circle">我要约驾</uv-button>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
    import { computed, onMounted, ref } from 'vue';
    import { getPrice, submitOrder, getBanner } from "@/src/api/index.ts"
    import { useAuthStore } from '../../stores/auth';
    import config from "@/src/config/index.ts"
    const checkHours = (rule, value, callback) => {
        console.log(value)
        if (!value) {
            return callback(new Error("请选择约驾时长"));
        } else {
            return true
        }
    }
    //表单验证
    const rules = ref({
        'address': [
            {
                type: "string",
                required: true,
                message: '请填接送地点',
                trigger: 'blur'
            }
        ],
        'transferTime': [
            {
                type: "string",
                required: true,
                message: '请选择接送时间',
                trigger: 'blur'
            }
        ],
        'ownCarFlag': [
            {
                type: "string",
                required: true,
                message: '请选择是否有车',
                trigger: 'blur'
            }
        ],
        'durationHours': [
            {
                type: "string",
                required: true,
                validator: checkHours,
                // message: '请选择约驾时长',
                trigger: 'blur'
            }
        ],
    });
    const formRef = ref(null);
    const list = ref([

    ])
    const columns = ref([
        [1, 2, 3, 4, 5, 6, 7, 8]
    ])
    const getLocation = () => {
        //获取当前位置
        uni.getLocation({
            altitude: true,

            success(res) {
                //获取位置
                uni.chooseLocation({
                    latitude: res.latitude,
                    longitude: res.longitude,
                    success(res) {
                        datas.value.address = res.address + res.name;
                        datas.value.latitude = res.latitude;
                        datas.value.longitude = res.longitude;
                        console.log(res)
                    }
                })
                console.log(res)
            },
            fail(res) {
                console.log(res)
            }
        })
    }
    onMounted(() => {
        //获取banner
        getBanner({ "status": 0 }).then(res => {
            res.result.map(item => {
                list.value.push(config.baseUrl + 'sys/common/static/' + item.coverImage);
            })
        })
        datas.value.userId = useAuthStore().userInfo.id;
    })
    const pickerDate = ref(null);
    const openPickerDate = () => {
        console.log(333)
        pickerDate.value.open();
    }
    //处理选择后的时间
    const selectTime = (time) => {
        datas.value.transferTime = timeFormat(time.value, 'yyyy-mm-dd hh:MM:ss')
    }
    const pickerRef = ref(null);
    const openPicker = () => {
        pickerRef.value.open()
    }
    const datas = ref({
        ownCarFlag: "0",
        durationHours: '',
        transferTime: '',
        remark: '',
        address: '',
        userId: '',
        latitude: '',
        longitude: ''
    })

    const price = ref('');
    const confirm = (val) => {
        datas.value.durationHours = val.value[0];
        //计算价格
        getPrice({ durationHours: val.value[0], ownCarFlag: datas.value.ownCarFlag }).then(res => {
            price.value = res.result
        })
    }
    //修改车后重新计算价格
    const newPrice = (val) => {
        //获取时长
        const time = datas.value.durationHours;
        if (time) {
            //计算价格
            getPrice({ durationHours: time, ownCarFlag: val }).then(res => {
                price.value = res.result
            })
        }
    }
    const submit = () => {
        formRef.value.validate().then(res => {
            if (res) {
                submitOrder(datas.value).then(res => {
                    if (res.success) {
                        uni.showToast({
                            icon: "none",
                            title: "预约成功"
                        })
                        //进入我的订单页面
                        uni.redirectTo({
                            url: "/pages/order/stu"
                        })
                    }
                })
            }
        }).catch(error => {
            console.log(error)
        })




    }
</script>

<style scoped lang="scss">
    ::v-deep .uv-input {
        background-color: #f5f5f5;
        border-radius: 20rpx !important;
        border: none !important;
    }

    ::v-deep .uv-textarea {
        background: #f5f5f5 !important;
        border-radius: 20rpx !important;
        border: none !important;
    }

    .content {
        background-color: #f5f5f5;

        .card {
            background-color: #fff;
            box-sizing: border-box;
            border-radius: 30rpx;
            width: 95%;
            padding: 15rpx;
            margin: 0 auto;
        }
    }
</style>